<template>
  <div class="team-stats-container">
    <div class="team-stats-header">
      <h3>团队周报统计</h3>
      <div class="header-actions">
        <el-select v-model="selectedTeam" placeholder="选择团队" class="team-select">
          <el-option
            v-for="team in teams"
            :key="team.id"
            :label="team.name"
            :value="team.id"
          />
        </el-select>
        <el-date-picker
          v-model="weekRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="member-card">
          <template #header>
            <div class="card-header">
              <span>团队成员</span>
            </div>
          </template>
          <el-tree
            ref="memberTreeRef"
            :data="memberTree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleMemberClick"
          >
            <template #default="{ node, data }">
              <div class="tree-node">
                <span>{{ node.label }}</span>
                <el-tag size="small" type="success" v-if="data.hasWeekly">已提交</el-tag>
              </div>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="weekly-card" v-if="currentMember">
          <template #header>
            <div class="card-header">
              <span>{{ currentMember.name }} 的周报</span>
              <el-tag type="primary">{{ currentWeek }}</el-tag>
            </div>
          </template>
          <div v-if="currentMember.hasWeekly">
            <el-descriptions title="周报详情" :column="1" border>
              <el-descriptions-item label="本周工作总结">
                {{ selectedWeekly.summary }}
              </el-descriptions-item>
              <el-descriptions-item label="工作明细">
                <div v-for="(project, pIndex) in selectedWeekly.projects" :key="pIndex">
                  <div class="project-item">
                    <h4>{{ pIndex + 1 }}. {{ project.projectName }}</h4>
                    <div class="task-list">
                      <div v-for="(task, tIndex) in project.tasks" :key="tIndex" class="task-item">
                        <span class="task-index">（{{ tIndex + 1 }}）</span>
                        <span class="task-content">{{ task.content }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="下周工作计划">
                {{ selectedWeekly.nextWeekPlan }}
              </el-descriptions-item>
              <el-descriptions-item label="问题与建议" v-if="selectedWeekly.issues">
                {{ selectedWeekly.issues }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <el-empty v-else description="该成员暂未提交周报" />
        </el-card>
        <el-empty v-else description="请选择团队成员查看周报" />
      </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" title="周报详细信息" width="70%">
      <div v-if="selectedWeekly" class="weekly-dialog-content">
        <el-descriptions title="周报详情" :column="1" border>
          <el-descriptions-item label="本周工作总结">
            {{ selectedWeekly.summary }}
          </el-descriptions-item>
          <el-descriptions-item label="工作明细">
            <div v-for="(project, pIndex) in selectedWeekly.projects" :key="pIndex">
              <div class="project-item">
                <h4>{{ pIndex + 1 }}. {{ project.projectName }}</h4>
                <div class="task-list">
                  <div v-for="(task, tIndex) in project.tasks" :key="tIndex" class="task-item">
                    <span class="task-index">（{{ tIndex + 1 }}）</span>
                    <span class="task-content">{{ task.content }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="下周工作计划">
            {{ selectedWeekly.nextWeekPlan }}
          </el-descriptions-item>
          <el-descriptions-item label="问题与建议" v-if="selectedWeekly.issues">
            {{ selectedWeekly.issues }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'

const selectedTeam = ref('')
const weekRange = ref([new Date(), new Date()])
const currentWeek = ref(`2024年第${getWeekNumber(new Date())}周`)
const currentMember = ref(null)
const dialogVisible = ref(false)
const memberTreeRef = ref(null)

// 模拟团队数据
const teams = ref([
  { id: 'team1', name: '前端开发组' },
  { id: 'team2', name: '后端开发组' },
  { id: 'team3', name: '产品设计组' }
])

// 模拟团队成员树形结构
const memberTree = ref([
  {
    id: 1,
    label: '张经理',
    name: '张经理',
    children: [
      {
        id: 2,
        label: '李工程师',
        name: '李工程师',
        hasWeekly: true
      },
      {
        id: 3,
        label: '王工程师',
        name: '王工程师',
        hasWeekly: true
      },
      {
        id: 4,
        label: '赵工程师',
        name: '赵工程师',
        hasWeekly: false
      }
    ],
    hasWeekly: true
  },
  {
    id: 5,
    label: '刘经理',
    name: '刘经理',
    children: [
      {
        id: 6,
        label: '陈工程师',
        name: '陈工程师',
        hasWeekly: true
      },
      {
        id: 7,
        label: '林工程师',
        name: '林工程师',
        hasWeekly: false
      }
    ],
    hasWeekly: true
  }
])

// 模拟周报数据
const weeklyData = ref([
  {
    id: 1,
    memberId: 1,
    memberName: '张经理',
    summary: '本周主要对团队工作进行了规划和分配，跟进了各项目的进展情况。',
    projects: [
      {
        id: 'p1',
        projectId: 'p1',
        projectName: '官网重构项目',
        tasks: [
          { id: 't1', content: '完成了项目整体规划与分工', sort: 1 },
          { id: 't2', content: '审核了首页和产品页的设计稿', sort: 2 },
          { id: 't3', content: '协调了前后端接口对接事宜', sort: 3 }
        ]
      },
      {
        id: 'p2',
        projectId: 'p2',
        projectName: '移动端适配',
        tasks: [
          { id: 't4', content: '确定了移动端适配的技术方案', sort: 1 },
          { id: 't5', content: '分配了各页面的开发任务', sort: 2 }
        ]
      }
    ],
    nextWeekPlan: '下周将重点推进官网重构项目，确保按时交付。',
    issues: '目前团队人手略有不足，建议适当增加人员配置。'
  },
  {
    id: 2,
    memberId: 2,
    memberName: '李工程师',
    summary: '本周主要负责官网首页的开发工作，基本完成了布局和主要功能。',
    projects: [
      {
        id: 'p1',
        projectId: 'p1',
        projectName: '官网重构项目',
        tasks: [
          { id: 't1', content: '完成了首页的响应式布局', sort: 1 },
          { id: 't2', content: '实现了轮播图和产品展示模块', sort: 2 },
          { id: 't3', content: '优化了首页加载性能', sort: 3 }
        ]
      }
    ],
    nextWeekPlan: '下周计划完成首页的剩余功能和单元测试。',
    issues: ''
  },
  {
    id: 3,
    memberId: 3,
    memberName: '王工程师',
    summary: '本周负责产品页面的开发，完成了基础框架搭建。',
    projects: [
      {
        id: 'p1',
        projectId: 'p1',
        projectName: '官网重构项目',
        tasks: [
          { id: 't1', content: '完成了产品页的基础布局', sort: 1 },
          { id: 't2', content: '实现了产品筛选和分类功能', sort: 2 }
        ]
      }
    ],
    nextWeekPlan: '下周计划完成产品详情页和评论功能的开发。',
    issues: '产品图片资源不完整，需要协调设计部门提供。'
  }
])

const selectedWeekly = computed(() => {
  if (!currentMember.value) return null
  return weeklyData.value.find(w => w.memberId === currentMember.value.id) || null
})

function handleMemberClick(data) {
  currentMember.value = data
}

function viewWeeklyDetail(weekly) {
  dialogVisible.value = true
}

function getWeekNumber(date) {
  const firstDayOfYear = new Date(date.getFullYear(), 0, 1)
  const pastDaysOfYear = (date - firstDayOfYear) / 86400000
  return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7)
}

onMounted(() => {
  // 默认选中第一个团队
  if (teams.value.length > 0) {
    selectedTeam.value = teams.value[0].id
  }
})
</script>

<style scoped>
.team-stats-container {
  padding: 20px;
  background-color: #f9fbff;
  min-height: 100%;
}

.team-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.team-stats-header h3 {
  color: #1e5eff;
  font-size: 1.5rem;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.team-select {
  width: 140px;
}

.member-card, .weekly-card {
  height: 100%;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.project-item {
  margin-bottom: 15px;
}

.project-item h4 {
  margin: 10px 0;
  color: #1e5eff;
}

.task-list {
  padding-left: 20px;
}

.task-item {
  margin-bottom: 8px;
  display: flex;
}

.task-index {
  margin-right: 8px;
  color: #606266;
}

.task-content {
  flex: 1;
}

:deep(.el-descriptions__label) {
  width: 120px;
  background-color: #f5f7fa;
}

:deep(.el-button--primary) {
  background-color: #1e5eff;
}

:deep(.el-tag--primary) {
  background-color: #e6f1ff;
  border-color: #1e5eff;
  color: #1e5eff;
}

:deep(.el-tag--success) {
  background-color: #f0f9eb;
  border-color: #67c23a;
  color: #67c23a;
}

.weekly-dialog-content {
  max-height: 70vh;
  overflow-y: auto;
}
</style> 